<script setup lang="ts">
import { reactive,ref } from "vue"
import { ts } from "../../i18n"
import Nifi from "../../nifi";

const { nifi, id, uuid } = defineProps<{ nifi: Nifi, id: string, uuid: string }>();
const t = ts('quene.detail')

const data = ref<any>({})

const initData = async () => { 
    const res = await nifi.Quene.getFlowfiles(id,uuid) || {}
    data.value = res;
}
initData();

</script>

<template>
    <div class="w-60vw h-60vh relative overflow-auto box-border p-16px">
        <fieldset>
            <legend>{{ t('legend.detail') }}</legend>
            <div class="w-full flex gap-1em">
                <fieldset class=" ">
                    <legend>{{ t('legend.flow file') }}</legend>
                    <div>
                        <div>
                            <h5>{{ t('label.uuid') }}</h5>
                            <div>{{ data.uuid }}</div>
                        </div>
                        <div>
                            <h5>{{ t('label.filename') }}</h5>
                            <div>{{ data.filename }}</div>
                        </div>
                        <div>
                            <h5>{{ t('label.filesize') }}</h5>
                            <div>{{ data.size }}</div>
                        </div>
                        <div>
                            <h5>{{ t('label.quene position') }}</h5>
                            <div>{{  }}</div>
                        </div>
                    </div>
                </fieldset>
                <fieldset class="important-m-0">
                    <legend>{{ t('legend.content') }}</legend>
                    <div>
                        <div>
                            <h5>{{ t('label.container') }}</h5>
                            <div>{{ data.contentClaimContainer }}</div>
                        </div>
                        <div>
                            <h5>{{ t('label.section') }}</h5>
                            <div>{{ data.contentClaimSection }}</div>
                        </div>
                        <div>
                            <h5>{{ t('label.identifier') }}</h5>
                            <div>{{ data.contentClaimIdentifier }}</div>
                        </div>
                        <div>
                            <h5>{{ t('label.offset') }}</h5>
                            <div>{{ data.contentClaimOffset }}</div>
                        </div>
                    </div>
                </fieldset>
            </div>
        </fieldset>

        <fieldset>
            <legend>{{ t('legend.attr') }}</legend>
            <div>
                <div>
                    <h5>{{ t('label.filename') }}</h5>
                    <div>{{ data.attributes?.filename }}</div>
                </div>
                <div>
                    <h5>{{ t('label.path') }}</h5>
                    <div>{{ data.attributes?.path}}</div>
                </div>
                <div>
                    <h5>{{ t('label.uuid') }}</h5>
                    <div>{{ data.attributes?.uuid }}</div>
                </div>
            </div>
        </fieldset>
    </div>
</template>